<template>
	<view class="containerbox">
		<ranking_header centent-margin-top="-280" headerBgHeight="464" class="containerbox">
			<view class="containerbox">
				<uv-navbar :fixed="false" bg-color="transparent" left-icon-size="0" />
				<z-paging
					ref="paging"
					v-model="classlist"
					@query="querylist"
					class="containerbox"
					empty-view-text="暂无排课~"
					:loading-full-fixed="false"
					:auto-hide-loading-after-first-loaded="true"
				>
					<template #loading>
						<dw_loading :status="loading" class="my-auto" />
					</template>

					<template #top>
						<view class="flex-between text-white mx-30 pb-10">
							<view class="" v-if="infoData?.id">
								<view class="text-40">{{ infoData?.agent?.name }}</view>
								<view class="text-26 my-5 mt-5" v-if="infoData?.mobile">电话：{{ infoData?.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}</view>
							</view>
							<image v-else src="/data/logo/logo.png" style="height:126rpx;margin-left:30rpx" mode="heightFix" />
<!--							<image v-else :src="`${imgPath}home/Logo.png`" style="height:80rpx;margin-left:30rpx" mode="heightFix" />-->
							<view class="w-204 h-126 stufy-icon" style="right: 20rpx; bottom: -2rpx;">
								<uv-image :src="`${imgPath}home/study.svg`" width="204rpx" height="126rpx" />
							</view>
						</view>
					</template>

					<template v-if="!loading">
						<view class="bgc-white px-30 pt-20 pb-30 round-20 mx-30">
							<view class="flex-left border-bottom pb-20 mb-20" @tap="gologin">
								<uv-image class="round-full" :src="infoData?.portrait?.url || `${$imageBaseUrl}avatar.png`" width="90rpx" height="90rpx" shape="circle" />
								<view class="flex-col ml-20">
									<view class="text-28 font-weight-600" v-if="infoData?.id">{{ infoData?.name }}</view>
									<view class="text-28" v-else>去登录</view>
									<view v-if="infoData?.id">
										<text class="text-22 mr-10 color_4a">30分钟</text><text class="text-30 font-weight-600">{{ infoData?.classHour30 || 0 }}</text><text class="text-22">次</text>
										<text class="text-22 mr-10 color_4a ml-20">60分钟</text><text class="text-30 font-weight-600">{{ infoData?.classHour60 || 0 }}</text><text class="text-22">次</text>
									</view>
								</view>
							</view>

							<home_statistics :learn-info="statistics" />
						</view>

						<view class="radio_cont round-20 flex-left -mt-20 px-35 py-20 mx-30" style="border-radius: 0 0 20rpx 20rpx;" v-if="classlist.length && !loading">
							<uv-image class="" :src="`${imgPath}home/radio.svg`" width="48rpx" height="48rpx" />
							<text class="text-26 ml-20">课程即将开始，请做好准备！</text>
						</view>

						<view class="mx-30">
							<home_study />
							<view @click="toPage('/pages/other/special/detail')" style="margin-top: 30rpx;">
								<image :src="trialVal" mode="widthFix" class="w-full" style="height: 150rpx;"></image>
							</view>
						</view>

						<view v-if="classlist.length && !loading" class="round-20 bgc-white px-30 mt-35 pb-5 mx-30">
							<view v-for="({ date = '', list = [] }, index) in classlist" :key="index" :class="{ 'border-bottom': index + 1 != classlist.length }">
								<view class="py-30 mt-10">
									<view class="flex-between flex-center">
										<view class="text-24 color_4a">{{ date }} 排课</view>
										<view class="flex-center">
											<view class="bg-f7 round-10 flex-center h-50 tip-view">
												<text class="dian bgc-gray"></text> <text class="text-22 ml-10">未开始</text>
											</view>

											<view class="bg-f7 round-10 flex-center h-50 mx-15 tip-view">
												<text class="dian bgc-green"></text> <text class="text-22 ml-10">进行中</text>
											</view>

											<view class="bg-f7 round-10 flex-center h-50 tip-view">
												<text class="dian bgc-red"></text> <text class="text-22 ml-10">已过期</text>
											</view>
										</view>
									</view>
								</view>

								<view class="flex-center w-full bg-f7 mb-30" v-for="({ course = {}, id = '', startTime = '', endTime = '', status = {} }, idx) in list" :key="id">
									<view class="round-tl-20 round-bl-20 bgc-gray w-10 h-138" v-if="status.value == 0" />
									<view class="round-tl-20 round-bl-20 bgc-red w-10 h-138" v-else-if="status.value == 3" />
									<view class="round-tl-20 round-bl-20 bgc-green w-10 h-138" v-else />
									<view class="flex-1 ml-20">
										<view class="text-36 font-weight-600">{{ startTime }}-{{ endTime }}</view>
										<view class="text-28 mt-15">{{ course.name }}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</z-paging>
			</view>
		</ranking_header>

		<gl_update />
		<dw_tabbar :fiexd="true" />
	</view>
</template>

<script setup>
	
	import { ref, computed } from "vue";
	import { imgPath } from '@/common/config';
	import home_study from './components/study';
	import { getuserInfo } from '@/common/apis/account' ;
	import { appointmentList } from '@/common/apis/study';
	import { userconfig_api } from '@/common/apis/other';
	import ranking_header from '@/pages/components/header';
	import home_statistics from '../components/statistics.vue';
	import { onShow, onShareTimeline, onShareAppMessage } from "@dcloudio/uni-app";
	
	
	/** 用户信息 */
	const { user } = uni.$store();
	const infoData = computed(() => user.userInfo);
	
	let toPage = str => {
		uni.navigateTo({
			url: str
		})
	}
	
	/** 统计 */
	const statistics = computed(() => {
		if (user.userInfo) {
			const { totalTeacherLearnTime, totalClassHour, totalCourse, userSelfLearnCount } = user.userInfo?.statistics;
			return { one: totalClassHour || 0, two: totalTeacherLearnTime || 0, three: userSelfLearnCount || 0 };
		};
		
		return {};
	})
	
	/** z-paging 实例 */
	const paging = ref({});
	
	/** 列表 */
	const classlist = ref([]);
	
	/** 请求状态 */
	const loading = ref(true);
	
	/** 获取列表 */
	async function querylist(page, pageSize) {
		const params = { page, pageSize, simplePage: 1 };
		const result = await appointmentList();
		uni.$fui.sleep(() => loading.value = false);
		paging.value.complete(result);
	};
	
	const trialVal = ref()
	
	/** 进入页面时 */
	onShow(async () => {
		if(user.token){
			paging.value?.refresh?.();
			const userinfo = await getuserInfo();
			user.setuserInfo(userinfo);
		};
		let res = await userconfig_api({'key[0]': 'trial_image'})
		trialVal.value = res.trial_image
	});
	
	/** 去登录 */
	function gologin() {
		if (user.islogin) return
		uni.$fui.href('/pages/account/login', 'login');
	};
	
	
</script>

<style scoped lang="scss">
	.stufy-icon{transform: translateY(10rpx);position: relative;z-index: 11}
	.studyImg{top: -65px;right: 8rpx}
	.radio_cont{background: #FCF5EC;color: #6F4109}
	.dian{width: 16rpx;height: 16rpx;border-radius: 50%}
	.h-138{height: 138rpx}
	.color_4a{color: #4A4A4A}
	.bg-f7{background-color: #F7F8FA}
	.tip-view{width: 115rpx}
</style>